import React, { useState } from "react";
import {NavLink} from "react-router-dom";
import PropTypes from "prop-types";
import PubSub from "pubsub-js";
import moment from "moment";
import Table from "../../Table";
import Popover from "../../Popover";

import sizeFormat from "../../../utils/sizeFormat";

import dirSVG from "../../../assets/file-icon/dir.svg"
import otherSVG from "../../../assets/file-icon/other.svg"


import "./index.scss";

export default function List(props) {

    const [columns] = useState([
        {
            name: '文件名',
            fieldName: 'name',
            align: 'left',
            /*width: '1000px',*/
            render: ({ value, list, index }) => (
                <div className='file-name-warp'>
                    <span className='file-icon'>
                        <img src={ list[index].isDir ? dirSVG : otherSVG } alt={ value } />
                    </span>
                    {
                        list[index].isDir
                            ? (<NavLink to={ `/netdisk/space?path=${encodeURIComponent(list[index].path)}` } className='file-name'>{ value }</NavLink>)
                            : (<span className='file-name' >{ value }</span>)
                    }
                    <div className='file-ops'>
                        <span className='icon-share' />
                        <span className='icon-download' />
                        <Popover readerLabel={ () => (<span className='icon-more' />) }
                                 renderPopoverBox={ () => (
                                     <ul className='more-list'>
                                         <li>移动到</li>
                                         <li>复制到</li>
                                         <li>重命名</li>
                                         <li>删除</li>
                                     </ul>
                                 ) }
                        />
                    </div>
                </div>
            ),
        },
        {
            name: '大小',
            fieldName: 'size',
            align: 'left',
            width: '272px',
            render: ({ value }) => (<span>{ value ? sizeFormat(value) : '-' }</span>),
        },
        {
            name: '修改日期',
            fieldName: 'lastModified',
            align: 'left',
            width: '272px',
            render: ({ value }) => (<span>{ moment(value).format('YYYY-MM-DD HH:mm:ss') }</span>),
        }
    ])

    function selectHandle(list) {
        PubSub.publish('EV_SELECT', list)
    }

    return (
        <Table className={'dir-list-warp'}
               columns={ columns }
               data={ props.data }
               selection={true}
               select={ selectHandle }
        />
    )
}

List.propTypes = {
    data: PropTypes.array,
    open: PropTypes.func
}

List.defaultProps = {
    data: [],
    open: index => {}
}